<template>
    <div>
    <h1>排房信息列表</h1>
    <div>
        房型名称:
        <select v-model="query.typename">
            <option value="">请选择</option>
            <option :value="item.typeName" v-for="item in showhouse">{{ item.typeName }}</option>
        </select>
        <input type="button" value="查询" class="btn btn-success" @click="showw"/>
    </div>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>
                  <input type="checkbox" v-model="checkAll" @click="CheckAll"/>
                </td>
                <td>排房信息ID</td>
                <td>门店</td>
                <td>房型</td>
                <td>房号</td>
                <td>姓名</td>
                <td>身份证</td>
                <td>手机号</td>
                <td>住店时间</td>
            </tr>
            <tr v-for="item in data.list">
                <td>
                  <input type="checkbox" :value="item.terraceID" v-model="checkOne" @change="CheckOne"/>
                </td>
                <td>{{item.terraceID}}</td>
                <td>{{item.shopName}}</td>
                <td>{{item.typeName}}</td>
                <td>{{item.number}}</td>
                <td>{{item.userName}}</td>
                <td>{{item.idCord}}</td>
                <td>{{item.phone.substring(0,3)+'****'+item.phone.substring(7)}}</td>
                <td>{{moment(item.checkintime).format("YYYY/MM/DD")}}-{{ moment(item.departureTime).format("YYYY/MM/DD") }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <span>每页显示{{ query.pageSize }}条/共{{ data.totalPage }}条</span>
        <span>当前显示第{{ query.pageIndex }}页/共{{ data.totalCount }}页</span>
        <select v-model="query.pageSize"  @change="ShowList">
            <option :value="item" v-for="item in arr">每页显示{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="Gopage(1)"/>
        <input type="button" value="上一页" @click="Gopage(query.pageIndex-1)"/>
        <span v-for="item in data.totalPage" @click="Gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="Gopage(query.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Gopage(data.totalPage)"/>
        <input type="number" v-model="query.pageIndex"/>
        <input type="button" value="跳转" class="btn btn-warning" @click="Gopage(query.pageIndex)"/>
    </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from 'axios';
  import moment from 'moment';
  import { ref,reactive,onMounted } from 'vue';
  import { useRoute,useRouter } from 'vue-router';
  const route=useRoute();
  const router=useRouter();
  
  
  
  onMounted(()=>{
    ShowList();
    ShowHouse();
  })
  
let showhouse:any=ref([])
let arr=ref([3,5,10,20])
const ShowHouse=()=>
{
    axios
    ({
        url:'/api/House/GetHouse',
        method:'get'
    })
    .then(res=>{
        showhouse.value=res.data;
    })
    .catch(err=>{

    })
}
let query:any=reactive
({
    pageIndex:1,
    pageSize:3,
    typename:''
})

const showw=()=>
{
    query.pageIndex=1;
    ShowList();
}

  let data:any=reactive
  ({
    totalCount:'',
    totalPage:'',
    list:[]
  })
  const ShowList=()=>
  {
    axios
    ({
        url:'/api/House/GetTerraces',
        method:'get',
        params:query
    })
    .then(res=>{
        Object.assign(data,res.data);
    })
    .catch(err=>{
  
    })
  }
  
  const Gopage=(num:any)=>
  {
    if(num<1)
    {
      query.pageIndex=1;
      return;
    }
    if(num>data.totalPage)
    {
        query.pageIndex=data.totalPage;
        return;
    }
    query.pageIndex=num;
    ShowList();
  }
let checkAll=ref(false)
let checkOne=ref([])

const CheckAll=()=>
{
  checkAll.value=!checkAll.value;
  if(checkAll.value==true)
  {
     checkOne.value=data.list.map((item:any)=>
    {
      return item.terraceID;
    })
  }
  else
  {
    checkOne.value=[];
  }
}

const CheckOne=()=>
{
  if(checkOne.value.length==data.list.length)
  {
     checkAll.value=true;
  }
  else
  {
    checkAll.value=false;
  }
}

  </script>
  
  <style scoped>
  span
  {
    margin: 0 10px;
  }
  input
  {
    margin: 0 10px;
  }
  </style>